<template>
  <div>
    <el-card class="box-card bdr-10" shadow="never">
      <div slot="header">
        <span>{{userInfo.channelName||userInfo.realName}}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button> -->
        <!-- <el-button style="float: right; padding: 3px 0; margin-right: 5px;" type="text">冻结</el-button> -->
      </div>
      <div class="detail">
        <!--<div>-->
        <!--<span>用户id</span>-->
        <!--<span>{{userInfo.id}}</span>-->
        <!--</div>-->
        <div>
          <span>账号</span>
          <span>{{userInfo.username}}</span>
        </div>
        <div>
          <span>角色</span>
          <span>{{userInfo.roleName}}</span>
        </div>
        <div>
          <span>用户状态</span>
          <span>正常</span>
        </div>
        <div>
          <span>企业数量</span>
          <span>{{userInfo.memberCount}}</span>
        </div>
        <!--<div>-->
        <!--<span>利润配比</span>-->
        <!--<span>14%</span>-->
        <!--</div>-->
        <!--<div>-->
        <!--<span>平台利润</span>-->
        <!--<span>20%</span>-->
        <!--</div>-->
        <div>
          <span>最后一次登录</span>
          <span>{{$utils.toTimeFormat(userInfo.lastLoginTime)}}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'

  @Component
  export default class Card extends Vue {
    @Prop() userInfo

    get merchantId () {
      return this.$route.params.merchantId
    }
  }
</script>
<style lang="less" scoped>
  .box-card {
    width: 300px;
  }

  .detail {
    line-height: 42px;
    > div {
      & > :first-child {
        display: inline-block;
        min-width: 100px;
        color: #333;
      }
    }
  }
</style>
